﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>

    <title>某公司大数据监控平台</title>
    <script type="text/javascript" th:src="@{/ksh/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/ksh/js/echarts.min.js}"></script>
    <script type="text/javascript" th:src="@{/ksh/js/china.js}"></script>
    <script type="text/javascript" th:src="@{/ksh/js/map.js}"></script>
    <script type="text/javascript" th:src="@{/ksh/js/js.js}"></script>
    <script type="text/javascript" th:src="@{/ksh/js/Bubble.js}"></script>
    <link rel="stylesheet" th:href="@{/ksh/css/style.css}"/>
</head>
<body>
<div class="head clearfix">
    <h1 class="pulll_left">浙江省-智慧三农大数据平台</h1>
    <div class="menu menu2 pulll_left">
        <ul>
            <li><a href="">产业空间框架布局</a></li>
            <li><a href="">数字农业</a></li>
            <li><a href="" style="color: #f4e925;">生产要素和农产品规划</a></li>
            <li><a href="">绿色资源和低碳经济规划</a></li>
            <li><a href="">数据总览</a></li>
            <li><a href="">数据预测</a></li>
        </ul>
    </div>

<!--    <div>-->
<!--        <div style="white-space: nowrap;">-->
<!--            <div style="display: inline-block;">-->
<!--                <select name="fruit">-->
<!--                    <option value="apple">苹果</option>-->
<!--                    <option value="banana">香蕉</option>-->
<!--                    <option value="orange">橙子</option>-->
<!--                </select>-->
<!--            </div>-->
        <div class="time" id="showTime">
            2018/6/12 17:00:12
        </div>
<!--    </div>-->

    <script>
        var t = null
        t = setTimeout(time, 1000) //開始运行
        function time() {
            clearTimeout(t) //清除定时器
            dt = new Date()
            var y = dt.getFullYear()
            var mt = dt.getMonth() + 1
            var day = dt.getDate()
            var h = dt.getHours() //获取时
            var m = dt.getMinutes() //获取分
            var s = dt.getSeconds() //获取秒
            document.getElementById('showTime').innerHTML =
                y + '/' + mt + '/' + day + ' ' + h + ':' + m + ':' + s + ''
            t = setTimeout(time, 1000) //设定定时器，循环运行
        }
    </script>
</div>
<div class="mainbox">
    <ul class="clearfix nav1">
        <li style="width: 22%">
            <div class="box">
                <style>
                    .table-container {
                        max-height: 200px; /* 设置表格容器的最大高度 */
                        /*overflow-y: auto; !* 允许垂直滚动 *!*/
                    }

                    .table1 {
                        width: 100%;
                        border-collapse: collapse;
                    }

                    .table1 th, .table1 td {
                        /*border: 1px solid #ddd;*/
                        padding: 6px;
                        text-align: left;
                    }

                    .table1 th {
                        position: sticky;
                        top: 0;
                        background-color: rgb(2,63,121); /* 表头背景颜色 */
                    }
                </style>

                <div class="tit">各省2021年综合评价总览排行</div>
                <div class="boxnav" style="height: 200px; overflow-y: auto;">
                    <div class="table-container">
                        <table id="table1" class="table1">
                            <thead>
                            <tr>
                                <th>省份</th>
                                <th>土地</th>
                                <th>农产品</th>
                                <th>农业技术</th>
                                <th>排名</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- 动态生成的表格内容将出现在这里 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <script th:inline="javascript">
                    /*<![CDATA[*/
                    document.addEventListener('DOMContentLoaded', function () {
                        // 使用 Fetch API 发起 GET 请求获取后端数据
                        fetch('mainpage/list1')
                            .then(response => response.json()) // 假设后端返回 JSON 数据
                            .then(ZhsnOdsIndex => {
                                console.log("获取值");
                                console.log(ZhsnOdsIndex);
                                var tableBody = document.querySelector('#table1 tbody');

                                // 不再使用 setInterval，直接渲染一次数据
                                tableBody.innerHTML = '';
                                for (let i = 0; i < ZhsnOdsIndex.length; i++) {
                                    const row = tableBody.insertRow(i);
                                    const cell1 = row.insertCell(0);
                                    const cell2 = row.insertCell(1);
                                    const cell3 = row.insertCell(2);
                                    const cell4 = row.insertCell(3);
                                    const cell5 = row.insertCell(4);

                                    cell1.textContent = ZhsnOdsIndex[i].省份;
                                    cell2.textContent = ZhsnOdsIndex[i].土地利用和资源配置综合评价;
                                    cell3.textContent = ZhsnOdsIndex[i].农产品综合发展综合评价;
                                    cell4.textContent = ZhsnOdsIndex[i].农业技术和生产手段综合评价;
                                    cell5.textContent = ZhsnOdsIndex[i].排名;
                                }
                            });
                    });
                    /*]]>*/
                </script>
            </div>


            <div class="box">
                <div class="tit">2021年综合指标</div>
                <div class="boxnav" style="height: 250px">
                    <div class="" style="height: 190px" id="echart1"></div>
                    <div class="leidanav">
                        <ul class="clearfix">
                            <li>
                                <span>土地利用和资源配置</span>
                                <p>0.1696</p>
                            </li>
                            <li>
                                <span>农业技术和生产手段</span>
                                <p>0.1628</p>
                            </li>
                            <li>
                                <span>农产品综合发展</span>
                                <p>0.2449</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li style="width: 56%">
          <div class="box">
            <div class="boxnav mapc" style="height: 550px; position: relative">
              <div class="mapnav">
                <ul>
                  <li>
                    <div>
                      <span>土地配置排名</span>
                      <p>11</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>农业技术排名</span>
                      <p>9</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>农产品发展排名</span>
                      <p>5</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>综合排名</span>
                      <p>7</p>
                    </div>
                  </li>
<!--                  <li>-->
<!--                    <div>-->
<!--                      <span>数据5</span>-->
<!--                      <p>10%</p>-->
<!--                    </div>-->
<!--                  </li>-->
                </ul>
              </div>
              <div class="mapnav2">
                <div class="box">
                  <div class="tit">综合排名及预测排名</div>
                  <div class="boxnav" style="height: 130px" id="sysx"></div>
                  <div class="leidanav leidanav3" style="margin-bottom: 15px">
                    <ul class="clearfix">
                      <li>
                        <span>去年名次</span>
                        <p>9</p>
                      </li>
                      <li>
                        <span>今年排名</span>
                        <p>7</p>
                      </li>
                      <li>
                        <span>进步名次</span>
                        <p>+2</p>
                      </li>
                      <li>
                        <span>预测明年排名</span>
                        <p>5</p>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="map" id="map"></div>
            <div class="box">
                    <div class="map" id="map"></div>

                    <script>
                        $('.mapbtn a').hover(function () {
                            var ind = $(this).index()
                            $('.mapnav ul').eq(ind).show().siblings().hide()
                        })
                    </script>
                </div>
            </div>
        </li>
        <li style="width: 22%">
          <div class="box">
            <div class="tit">种子推广情况</div>
            <div class="boxnav" id="echart3" style="height: 200px"></div>
          </div>
          <div class="box">
            <div class="tit">各省2021年产品产量指数排行</div>
            <div class="boxnav" style="height: 250px">
              <div
                style="height: 200px; float: left; width: 40%; padding: 0 5px"
              >
<!--                <div class="tit02 text-b">产品产量</div>-->
                <div class="huati">
                  <ul>
                    <li>1.海南<span class="text-d">4.299</span></li>
                    <li>2.浙江 <span class="text-d">1.304</span></li>
                    <li>3.内蒙古 <span class="text-d">0.815</span></li>
                    <li>4.福建 <span class="text-s">0.719</span></li>
                    <li>5.黑龙江 <span class="text-s">0.579</span></li>
                    <li>6.广东 <span class="text-s">0.534</span></li>
                    <li>7.吉林 <span class="text-s">0.334</span></li>

                  </ul>
                </div>
              </div>

              <div style="height: 200px; float: left; width: 60%">
                <div class="text-b tit02" style="text-align: center">
<!--                  关键词 — 云-->
                </div>
                <div class="tagcloud">
                  <!-- bo大小 co颜色 -->
                  <a class="b01 co01" href="">黑龙江</a>
                  <a class="b02 co02" href="">海南</a>
                  <a class="b03 co05" href="">内蒙古</a>
                  <a class="b04 co02" href="">浙江</a>
                  <a class="b03 co05" href="">福建</a>
                  <a class="b01 co01" href="">广东</a>
                  <a class="b01 co01" href="">吉林</a>
                </div>
                <script type="text/javascript">
                  /*3D标签云*/
                  tagcloud({
                    selector: '.tagcloud', //元素选择器
                    fontsize: 6, //基本字体大小, 单位px
                    radius: 40, //滚动半径, 单位px 页面宽度和高度的五分之一
                    mspeed: 'slow', //滚动最大速度, 取值: slow, normal(默认), fast
                    ispeed: 'slow', //滚动初速度, 取值: slow, normal(默认), fast
                    direction: 0, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
                    keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
                  })
                </script>
              </div>
            </div>
          </div>
        </li>
    </ul>

    <div class="box" style="padding: 20px 0">
        <ul class="clearfix nav2">
          <li style="width: 25%">
            <div class="tit01">2021年贸易情况</div>
            <div class="" id="">
              <div style="float: left; width: 50%; height: 170px" id="fb01"></div>
              <div style="float: left; width: 50%; height: 170px" id="fb02"></div>
            </div>
            <div class="leidanav leidanav2">
              <ul class="clearfix">
                <li>
                  <span>进口量  单位：</span>
                  <p>2947980.410</p>
                </li>
                <li>
                  <span>出口量</span>
                  <p>200033.340</p>
                </li>
                <li>
                  <span>进口额</span>
                  <p>325238.310</p>
                </li>
                  <li>
                      <span>出口额</span>
                      <p>69228.120</p>
                  </li>
              </ul>
            </div>
          </li>
          <li style="width: 25%">
            <div class="tit01">价格稳定度</div>
            <div class="ftechart" id="echart4"></div>
          </li>
          <li style="width: 25%">
            <div class="tit01">2021年企业存量情况</div>
            <div
              class=""
              style="height: 100%; display: flex; align-items: center"
            >
              <div
                style="float: left; width: 50%; height: 100%"
                class="wancheng"
              >
                <div>
                  <span>企业存量数</span>
                  <h3>600<i>家</i></h3>
                </div>
                <div class="yuan">
                  <span>2.6%</span>
                </div>
              </div>
              <div style="float: left; width: 50%; height: 50%" id="myd1"></div>
            </div>
          </li>
          <li style="width: 25%">
            <div class="tit01">2021年土地信息</div>

                <div class="" id="">
                    <div
                            style="float: left; width: 50%; height: 200px"
                            id="fb03"
                    ></div>
                    <div
                            style="float: left; width: 50%; height: 200px"
                            id="fb04"
                    ></div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
